<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import NavBar from '@/components/NavBar/index.vue'
import { useStudyWords } from '@/composables/useStudyWords'
import { handleNextStep, LearningState } from '@/services/learningStateMachine'
import { useUnitStudyWordsStore } from '@/stores/modules/useUnitStudyWordsStore'
import { onMounted, ref } from 'vue'
import CuttingContainer from './components/CuttingContainer.vue'
import WordCuttingSept1 from './components/WordCuttingSept1.vue'
import WordCuttingSept2 from './components/WordCuttingSept2.vue'

const unitStudyWordsStore = useUnitStudyWordsStore()
const {
  localWords,
  initStudyWords,
  updateWordClickNum,
  setActiveWord,
} = useStudyWords()

// 初始化本地数据
onMounted(() => {
  unitStudyWordsStore.updateStudyStartTime()
  initStudyWords(unitStudyWordsStore.currentGroup.words)
})

function handleClickCard(item: StudentWordItem) {
  updateWordClickNum(item.wordId)
}

function handleWordActivate(wordId: string | number) {
  setActiveWord(wordId)
}

const isShowSelectWord = ref(false)

function handleOnFinish() {
  isShowSelectWord.value = true
}

function handleOnComplete() {
  // 使用状态机处理下一步
  handleNextStep(LearningState.CUTTING)
}

function handleLeftClick() {
  uni.navigateBack()
}
</script>

<template>
  <CuttingContainer>
    <NavBar :title="`剪纸条 第${unitStudyWordsStore.currentGroupIndex + 1}组`" @left-click="handleLeftClick" />
    <!-- 剪刀 -->
    <WordCuttingSept1
      v-if="!isShowSelectWord"
      :words="localWords"
      @click-card="handleClickCard"
      @activate="handleWordActivate"
      @on-finish="handleOnFinish"
    />
    <!-- 选择 -->
    <WordCuttingSept2
      v-else
      :words="localWords"
      @click-card="handleClickCard"
      @activate="handleWordActivate"
      @on-complete="handleOnComplete"
    />
  </CuttingContainer>
</template>
